<template>
  <view class="my-page">
    <view class="header">
      <image class="avatar" src="/static/avatar.png"></image> 
      <view class="user-info">
        <text class="username">波克小菠萝</text>
        <text class="phone">182****1230</text>
      </view>
      <view class="stats">
        <view class="stat-item" v-for="(item, idx) in statList" :key="idx">
          <text class="stat-num">{{ item.num }}</text>
          <text class="stat-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">订单中心</view>
      <view class="order-nav">
        <view class="order-item" v-for="(item, idx) in orderNav" :key="idx">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">我的服务</view>
      <view class="service-nav">
        <view class="service-item" v-for="(item, idx) in serviceNav" :key="idx">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
    
    <button type="default" @click="login" v-if="!isLoggedIn">登录</button>
    <button type="warn" @click="goout" v-else>退出</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statList: [
        { num: '0.00', text: '余额' },
        { num: '18', text: '优惠卷' },
        { num: '16', text: '积分' }
      ],
      orderNav: [
        { text: '待付款' },
        { text: '待发货' },
        { text: '待收获' },
        { text: '待评价' },
        { text: '退款/售后' }
      ],
      serviceNav: [
        { text: '付费会员' },
        { text: '联系客服' },
        { text: '我的收藏' },
        { text: '地址信息' },
        { text: '浏览记录' },
        { text: '发票管理' },
        { text: '积分中心' },
        { text: '系统设置' }
      ],
      isLoggedIn: false
    }
  },
  onLoad() {
    const token = uni.getStorageSync('token');
    this.isLoggedIn = !!token;
  },
  methods: {
    login() {
      uni.navigateTo({
        url: '/pages/login/login' 
      });
    },
    goout() {
      uni.removeStorageSync('token'); 
      this.isLoggedIn = false; 
      uni.showToast({
        title: '退出成功',
        icon: 'none'
      });
    }
  }
}
</script>

<style scoped>
.my-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.header {
  background-color: #87d068;
  padding: 20rpx;
  color: #fff;
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.user-info {
  margin-bottom: 10rpx;
}
.username {
  font-size: 32rpx;
  font-weight: bold;
}
.phone {
  font-size: 24rpx;
  opacity: 0.8;
}
.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
.stat-item {
  text-align: center;
}
.stat-num {
  font-size: 30rpx;
  display: block;
}
.stat-text {
  font-size: 24rpx;
  opacity: 0.8;
}
.section {
  background-color: #fff;
  margin: 10rpx 0;
}
.section-title {
  padding: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 1px solid #f5f5f5;
}
.order-nav, .service-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  padding-top: 70rpx;
}
.order-item, .service-item {
  width: 20%;
  text-align: center;
  margin-bottom: 20rpx;
  padding-top: 70rpx;
}
</style>